<template>
    <div class="checkout-address">
      <div class="text">
        <!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
        <ul>
          <li><span>收<i/>货<i/>人：</span>朱超</li>
          <li><span>联系方式：</span>132****2222</li>
          <li><span>收货地址：</span>海南省三亚市解放路108号物质大厦1003室</li>
        </ul>
        <a href="javascript:;">修改地址</a>
      </div>
      <div class="action">
        <el-button class="btn-Qian" color="b4a078" @click="visibleDialog=true">切换地址</el-button>
              <el-button @click="DdetailDialog" class="btn-Tian" color="b4a078">添加地址</el-button>
      </div>
      <!-- 对话框 -->
      <Dialog title="切换收货地址" :modelValue="visibleDialog">
        1844
        <template #footer>
            <el-button @click="visibleDialog = false" type="gray" style="margin-right:20px">取消</el-button>
          <el-button @click="visibleDialog = false" type="primary">确认</el-button>
        </template>
      </Dialog>
      <!-- 添加地址 -->
      <detail ref="address"/>
    </div>
  </template>
  <script>
import { ref } from '@vue/reactivity'
  import Dialog from '../../components/pay/Dialog.vue'
  import detail from '../../components/pay/detail.vue'
  export default {
    setup(){
   const visibleDialog = ref(false)
   const address = ref(null)
   const DdetailDialog =() =>{
    address.value.open()
   }


   return{
    visibleDialog,DdetailDialog,address  
   }
    },
    
    components:{
        Dialog,detail
    },
  
  }
  </script>
  <style scoped lang="less">
  .checkout-address {
    border: 1px solid #f5f5f5;
    display: flex;
    align-items: center;.text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;  
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 2px dotted #ddd;
      span{
       font-size: 16px;
     color: #b4a078;
    
    // background-color: #f5f3ef;
      }
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn-Qian{
        color: #fff;
    border: 1px solid #b4a078;
    background-color: #b4a078;
    }
    .btn-Tian{
        color: #b4a078;
    border: 1px solid #b4a078;
    background-color: #f5f3ef;
    }
     
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
  }
  </style>